---
title: "空格"
# description: "Utilities for controlling an element's white-space property."
description: "用于控制元素的空格属性的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/whitespace'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Normal

<!-- Use `whitespace-normal` to cause text to wrap normally within an element. Newlines and spaces will be collapsed. -->
使用 `whitespace-normal` 使文本在元素中正常包裹。换行和空格将被折叠。

```html indigo
<template preview>
  <div class="w-3/4 px-6 py-4 bg-indigo-200 rounded-lg">
    <div class="whitespace-normal font-flow text-indigo-500 text-3xl leading-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
  </div>
</template>

<div class="w-3/4 ...">
  <div class="**whitespace-normal** ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
</div>
```

## No Wrap

<!-- Use `whitespace-nowrap` to prevent text from wrapping within an element. Newlines and spaces will be collapsed. -->
使用 `whitespace-nowrap` 来防止文本在元素中被包裹。换行和空格将被折叠。

```html emerald
<template preview>
  <div class="w-3/4 px-6 py-4 bg-emerald-200 rounded-lg overflow-x-auto">
    <div class="whitespace-nowrap font-flow text-emerald-500 text-3xl leading-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
  </div>
</template>

<div class="w-3/4 overflow-x-auto ...">
  <div class="**whitespace-nowrap** ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
</div>
```

## Pre

<!-- Use `whitespace-pre` to preserve newlines and spaces within an element. Text will not be wrapped. -->
使用 `whitespace-pre` 来保留元素中的换行和空格。文本不会被包装。

```html amber
<template preview>
  <div class="w-3/4 px-6 py-4 bg-amber-200 rounded-lg overflow-x-auto">
    <div class="whitespace-pre font-flow text-amber-500 text-3xl leading-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
  </div>
</template>

<div class="w-3/4 overflow-x-auto ...">
  <div class="**whitespace-pre** ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
</div>
```

## Pre Line

<!-- Use `whitespace-pre-line` to preserve newlines but not spaces within an element. Text will be wrapped normally. -->
使用 `whitespace-pre-line` 保留换行，但不保留元素中的空格。文本将被正常包装。

```html lightBlue
<template preview>
  <div class="w-3/4 px-6 py-4 bg-light-blue-200 rounded-lg">
    <div class="whitespace-pre-line font-flow text-light-blue-500 text-3xl leading-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
</template>

<div class="w-3/4 ...">
  <div class="**whitespace-pre-line** ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
</div>
```

## Pre Wrap

<!-- Use `whitespace-pre-wrap` to preserve newlines and spaces within an element. Text will be wrapped normally. -->
使用 `whitespace-pre-wrap` 来保留元素中的换行和空格。文本将被正常包装。

```html rose
<template preview>
  <div class="w-3/4 px-6 py-4 bg-rose-200 rounded-lg">
    <div class="whitespace-pre-wrap font-flow text-rose-500 text-3xl leading-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
</template>

<div class="w-3/4 ...">
  <div class="**whitespace-pre-wrap** ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
      eum natus enim maxime
      laudantium quibusdam illo nihil,

  reprehenderit saepe quam aliquid odio accusamus.</div>
```

<!-- ## Responsive -->
## 响应式 

<!-- To control the whitespace property of an element only at a specific breakpoint, add a `{screen}:` prefix to any existing whitespace utility. For example, adding the class `md:whitespace-pre` to an element would apply the `whitespace-pre` utility at medium screen sizes and above. -->
要只在特定的断点处控制元素的 whitespace 属性，可以在任何现有的 whitespace 功能类中添加 `{screen}:` 前缀。例如，将类 `md:whitespace-pre` 添加到元素中，就可以在中等尺寸以上的屏幕上使用 `whitespace-pre` 功能类。

```html
<div class="whitespace-normal **md:whitespace-pre** ...">
<!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义 

<!-- ### Variants -->
### 变体 

<Variants plugin="whitespace" />

<!-- ### Disabling -->
### 禁用 

<Disabling plugin="whitespace" />
